<template>
  <div class="mvContainer Container">
    <div class="title">精选视频</div>
    <div class="mvList">
      <div class="mvBox" v-for="mvItem in mvList" :key="mvItem.id">
        <div
          class="mvImg"
          @click="toMvdetail(mvItem.id)"
          @mouseenter="ishow(mvItem)"
          @mouseleave="ihidden(mvItem)"
        >
          <i class="iconfont icon-bofang1" :class="mvItem.isMvShow ? 'actives' : ''"></i>
          <img :src="mvItem.cover" alt="" />
        </div>
        <div class="mvTel">{{ mvItem.name }}</div>
        <div class="mvArt">{{ mvItem.artistName }}</div>
      </div>
    </div>
    <ElPagination
      :page-size="25"
      :pager-count="7"
      layout="prev, pager, next"
      :total="1050"
      :current-page="current"
      @current-change="pageDataHandle"
    >
    </ElPagination>
    <Live></Live>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { ElPagination } from "element-plus";
export default defineComponent({
  name: "Mv",
});
</script>

<script lang="ts" setup>
import { getMvList } from "../../api/Mv/Mv";
import { mvListModel, mvListModelList } from "../../api/Mv/Model";
import { useRouter } from "vue-router";
import Live from "../../components/Live/index.vue";
const router = useRouter();
// 视频盒子鼠标移入显示播放图标
const ishow = (mvItem: mvListModel) => {
  mvItem.isMvShow = true;
};
const ihidden = (mvItem: mvListModel) => {
  mvItem.isMvShow = false;
};
// 当前页
const current = ref<number>(1);
// 视频列表数据
let mvList = ref<mvListModelList>([]);
// 请求视频列表数据
onMounted(async () => {
  const res = await getMvList(0);
  mvList.value = res.data.data;
});
// 请求当前页的数据方法
const pageDataHandle = async (val: number) => {
  current.value = val;
  const res = await getMvList((current.value - 1) * 20);
  mvList.value = res.data.data;
};
// 点击跳转至播放视频页
const toMvdetail = (id: string | number) => {
  router.push({
    name: "Mvdetail",
    params: {
      id,
    },
  });
};
</script>

<style lang="less" scoped>
.mvContainer {
  width: 1200px;
  margin: 50px auto;
  .title {
    font-size: 26px;
    margin-bottom: 30px;
  }
  .mvList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .mvBox {
      width: 285;
      height: 230px;
      margin: 25px 0;
      .mvImg {
        width: 285px;
        height: 160px;
        overflow: hidden;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 50px;
          color: #fff;
          transform: translateX(-50%) translateY(-50%);
          display: none;
          z-index: 999;
        }
        &:hover {
          img {
            transform: scale(1.1);
          }
        }
        .actives {
          display: block;
        }
        img {
          width: 285px;
          height: 160px;
          cursor: pointer;
          transition: all 1s;
        }
      }

      .mvTel {
        line-height: 35px;
        width: 285px;
      }
      .mvArt {
        color: #9093b3;
        font-size: 14px;
      }
    }
  }
}
</style>
<style lang="less">
.Container {
  .el-pagination {
    text-align: center;
  }
  .number {
    line-height: 40px;
  }
  .active {
    background-color: #ff0000 !important;
    color: #fff !important;
    line-height: 40px;
    width: 40px !important;
    height: 40px;
  }
  .el-icon {
    width: 40px !important;
    height: 40px;
    line-height: 40px !important;
  }
  .more {
    width: 40px !important;
    height: 40px;
    line-height: 40px !important;
  }
}
</style>
